<!--
*@Author: QWP
*@Description: 研判
*@Date: 2024-07-23 10:44:24
-->
<template>
  <a-tabs v-model:activeKey="activeKey"
    class="u-adjust-tabs s-bg-white"
    v-bind="$attrs"
    @change="getData">
    <template #rightExtra>
      <a-button type="link" @click="toMore">查看更多</a-button>
    </template>
    <a-tab-pane class="f-h-100" key="1" tab="每日研判">
      <!-- :data-source="monthData" -->
      <a-list :grid="{ column: 1 }" 
        :data-source="dayDatas"
        :loading="loading">
        <template #renderItem="{ item }">
          <a-list-item style="padding: 6px; cursor: pointer"
            @click="viewDetial(item)">
          <a-space direction="vertical" class="f-w-100">
            <a-row justify="">
              <span class="u-item-title">{{ item.content }}</span>
            </a-row>
            <a-row class="f-desc-font">
              <a-col :span="10">发布者: {{ item.releaseusername }}</a-col >
              <a-col :span="8" align="center">发布日期: {{ splitDate(item.releasedate) }}</a-col>
            </a-row>
          </a-space>
          </a-list-item>
        </template>
      </a-list>
    </a-tab-pane>
    <a-tab-pane key="2" tab="每月研判">
      <a-list :grid="{ column: 1 }" 
        :data-source="monthData"
        :loading="loading">
        <template #renderItem="{ item }">
          <a-list-item style="padding: 6px; cursor: pointer"
            @click="viewDetial(item)">
          <a-space direction="vertical" class="f-w-100">
            <a-row justify="">
              <span class="u-item-title">
                {{ item['type' + activeKey] }}
                <span style="color: #1890FF;">{{ item.content }}</span>
              </span>
            </a-row>
            <a-row class="f-desc-font">
              <a-col :span="8">发布者: {{ item.releaseusername }}</a-col >
              <a-col :span="8" align="center">发布日期: {{ splitDate(item.releasedate) }}</a-col>
            </a-row>
          </a-space>
          </a-list-item>
        </template>
      </a-list>
    </a-tab-pane>
    <a-tab-pane key="3" tab="季度研判">
      <a-list :grid="{ column: 1 }" 
        :data-source="quarterData"
        :loading="loading">
        <template #renderItem="{ item }">
          <a-list-item style="padding: 6px; cursor: pointer"
            @click="viewDetial(item)">
          <a-space direction="vertical" class="f-w-100">
            <a-row justify="">
              <span class="u-item-title">
                {{ item['type' + activeKey] }}
                <span style="color: #1890FF;">{{ item.content }}</span>
              </span>
            </a-row>
            <a-row class="f-desc-font">
              <a-col :span="8">发布者: {{ item.releaseusername }}</a-col >
              <a-col :span="8" align="center">发布日期: {{ splitDate(item.releasedate) }}</a-col>
            </a-row>
          </a-space>
          </a-list-item>
        </template>
      </a-list>
    </a-tab-pane>
  </a-tabs>

  <Detial title=""
    :hideBtns="['submit']"
    wrap-class-name="full-modal"
    v-model:open="showDetial" />
  
  <!-- 文件预览 -->
  <u-dialog v-model:open="showEcho"
    wrap-class-name="full-modal"
    :destroyOnClose="true"
    :hideBtns="['submit']">
    <template v-if="currentData['filepath']">
      <UploadEcho :path="currentData['filepath']"
        @echoClose="showEcho = false"/>
    </template>
  </u-dialog>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted, h } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import Detial from './Detial.vue';
import UploadEcho from '@/views/common/UploadEcho.vue'
import * as studyApi from '@/service/assist/sudyJudge'

const router = useRouter()

const activeKey = ref<string>('1')

const showDetial = ref<boolean>(false)
const currentData = ref<object>({})
const showEcho = ref<boolean>(false)

const loading = ref<boolean>(false)
const dayDatas = ref<any[]>([])
const monthData = ref<any[]>([])
const quarterData = ref<any[]>([])

// 获取研判数据
const getData = async (type: string) => {
  loading.value = true;
  try {
    const res = await studyApi.selectJudg({ type })
    if(res.code == 0) {
      switch (type) {
        case '1':
          dayDatas.value = res.data || []
          break;
        case '2':
          monthData.value = res.data || []
          break;
        case '3':
          quarterData.value = res.data || []
          break;
      }
    }
  } catch (error) {}
  loading.value = false;
}

// 切割日期
const splitDate = (date) => {
  return (date || '').split(' ')[0]
}

// 查看详情
const viewDetial = (data) => {
  if(!data['filepath']) return
  currentData.value = data;
  showEcho.value = true
}

// 查看更多
const toMore = () => {
  router.push({
    path: '/TransitIndex/StudyJudge',
    query: {
      _tab: '1',
      label: '研判管理'
    }
  })
}

onMounted(() => {
  getData('1')
})

</script>

<style lang='scss'>
.u-adjust-tabs {
  overflow: hidden;
  .ant-tabs-content {
    overflow: scroll !important;
    &:hover {
      // overflow: scroll !important;
    } 
  }
  .ant-tabs-nav {
    &::before {
      border-bottom: none;
    }
    .ant-tabs-ink-bar {
      height: 4px;
      border-radius: 4px 4px 0 0
    }
  }
  .ant-tabs-tab-btn {
    font-size: var(--font-size-level-2);
  }
  .ant-tabs-tab-active {
    font-weight: 600;
  }
  .f-desc-font {
    color: #666;
  }
  .u-item-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 16px;
  }
}
</style>